---
type: integration
title: '@astrojs/vue'
description: Learn how to use the @astrojs/vue framework integration to extend component support in your Astro project.
sidebar:
  label: Vue
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vue/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

This **[Astro integration][astro-integration]** enables rendering and client-side hydration for your [Vue 3](https://vuejs.org/) components.

## Installation

Astro includes an `astro add` command to automate the setup of official integrations. If you prefer, you can [install integrations manually](#manual-install) instead.

To install `@astrojs/vue`, run the following from your project directory and follow the prompts:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add vue
  ```
  </Fragment>
</PackageManagerTabs>

If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.

### Manual Install

First, install the `@astrojs/vue` package:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/vue
  ```
  </Fragment>
</PackageManagerTabs>


Most package managers will install associated peer dependencies as well. If you see a `Cannot find package 'vue'` (or similar) warning when you start up Astro, you'll need to install Vue:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add vue
  ```
  </Fragment>
</PackageManagerTabs>

Then, apply the integration to your `astro.config.*` file using the `integrations` property:

```js ins={2} ins="vue()" title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});
```

## Getting started

To use your first Vue component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:

* 📦 how framework components are loaded,
* 💧 client-side hydration options, and
* 🤝 opportunities to mix and nest frameworks together

## Troubleshooting

For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!

You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.

## Contributing

This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!

[astro-integration]: /en/guides/integrations-guide/

[astro-ui-frameworks]: /en/guides/framework-components/#using-framework-components

## Options

This integration is powered by `@vitejs/plugin-vue`. To customize the Vue compiler, options can be provided to the integration. See the `@vitejs/plugin-vue` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue) for more details.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});
```

### `appEntrypoint`

<p>

**Type:** `string`<br />
<Since pkg="@astrojs/vue" v="1.2.0" />
</p>

You can extend the Vue `app` instance setting the `appEntrypoint` option to a root-relative import specifier (for example, `appEntrypoint: "/src/pages/_app"`).

The default export of this file should be a function that accepts a Vue `App` instance prior to rendering, allowing the use of [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html), `app.use`, and other customizations for advanced use cases.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});
```

```ts title="src/pages/_app.ts"
import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};
```

### `jsx`

<p>

**Type:** `boolean | object`<br />
<Since pkg="@astrojs/vue" v="1.2.0" />
</p>

You can use Vue JSX by setting `jsx: true`.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ jsx: true })],
});
```

This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the `@vitejs/plugin-vue-jsx` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) for more details.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // treat any tag that starts with ion- as custom elements
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});
```

### `devtools`

<p>

**Type:** `boolean | object`<br />
<Since pkg="@astrojs/vue" v="4.2.0" />
</p>

You can enable [Vue DevTools](https://devtools-next.vuejs.org/) in development by passing an object with `devtools: true` to your `vue()` integration config:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});
```

#### Customizing Vue DevTools

<p><Since pkg="@astrojs/vue" v="4.3.0" /></p>

For more customization, you can instead pass options that the [Vue DevTools Vite Plugin](https://devtools-next.vuejs.org/guide/vite-plugin#options) supports. (Note: `appendTo` is not supported.)

For example, you can set `launchEditor` to your preferred editor if you are not using Visual Studio Code:

```js title="astro.config.mjs"
import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});
```
